import { useState,useEffect } from 'react';

//自定义hook是一个函数，名称用use开头，函数内部可以调用其他钩子
function useAge(){
  const [age,setAge]=useState(0);
  useEffect(()=>{
    setTimeout(()=>{
      setAge(20)
    },2000)
  })
  return age
}

export default function HookTest(){
  const [count, setCount] = useState(0);
  const age=useAge();
  const [fruit,setFruit]=useState('banana');
  const [input,setInput]=useState('');
  const [fruits,setFruits]=useState(['apple','banana']);

  //副作用钩子在每次渲染时都会执行
  useEffect(()=>{
   console.log(`您点击了${count}次`)
  },[count])//加上[count]则只会针对count改变时，执行

  //如果打算只执行一次，则传入的第二个参数为[]
  useEffect(()=>{
    console.log('api的调用')
  },[])

  return (
    <div>
      <p>点击了{count}次</p>
      <button onClick={() => setCount(count + 1)}>点击</button>
      <p>年龄是{age?age:'loading...'}</p>
      <p>您选择的水果是{fruit}</p>
      <p>
        <input type="text" value={input} onChange={(e)=>setInput(e.target.value)}/>
        <button onClick={()=>setFruits([...fruits,input])}>添加</button>
      </p>
      <ul>
        {fruits.map((item,index)=>(
          <li key={index} onClick={()=>setFruit(item)}>{item}</li>
        ))}
      </ul>
    </div>
  )
}
